<template>
  <view  class="main">
    <u-navbar title="三量信息" :title-bold="true" title-color="#000"></u-navbar>
   
      <scroll-view
        :scroll-y="true"
        class="u-flex-1 of-hide"
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :refresher-threshold="50"
    refresher-background="#F5F5F5"
    @refresherrefresh="onRefresh"
    @scrolltolower="onScrollToLower"
      >
    <view class="u-m-20"  v-for="(item,index) in listData" :key="index">
        <view class="card">
            <view style="font-size: 30rpx;font-weight: 700;">{{ item.layerName }} - {{ item.importantColName }} -  {{ item.month }}</view>
            <view class="info">
                <view>地质储量 <text class="disC">（万吨）</text> <text class="fontW">{{ item.geologyReserves }}</text></view>
                <view>可采储量<text  class="disC">（万吨）</text> <text class="fontW">{{ item.mineReserves }}</text></view>
            </view>
            <view class="info">
                <view>开拓煤量<text  class="disC">（万吨）</text> <text class="primC">{{ item.openNum }}</text></view>
                <view>开拓煤量可采期<text  class="disC">（年）</text> <text class="primC">{{ item.openPeriod }}</text></view>
            </view>
            <view class="info">
                <view>准备煤量<text  class="disC">（万吨）</text> <text class="successC">{{ item.prepareNum }}</text></view>
                <view>准备煤量可采期<text  class="disC">（月）</text><text class="successC">{{ item.preparePeriod }}</text></view>
            </view>
            <view class="info">
                <view>回采煤量<text  class="disC">（万吨）</text> <text class="infoC">{{ item.mineNum }}</text></view>
                <view>回采煤量可采期<text  class="disC">（月）</text> <text class="infoC">{{ item.minePeriod }}</text></view>
            </view>
        </view>
    </view>
    <template v-if="!showEmpty">
      <view class="c-empty p-absolute-center">
        <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
      </view>
    </template>
    <view class="p-t-10 p-b-10" v-else>
      <u-loadmore :status="status" />
    </view>
    </scroll-view>
</view>
</template>

<script>
export default {
    data(){
        return{
            triggered:false,
            status:'loading',
            listData:[],
            searchData:{
                pageNumber:1,
                pageSize:20
            },
            showEmpty:true
        }
    },
    onLoad(options) {
        this.searchData.customerId = options.customerId
    this.getList()
  },
    methods:{
        onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getList()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    init() {
      this.searchData.pageNumber = 1
      this.status = 'loading'
      this.showEmpty = true
    },
    onScrollToLower() {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.getList()
      }
    },
   async getList(){
    const {customerId,pageNumber,pageSize} =this.searchData
        let url ='/excavation/alarm1/getThreeQuantitiesList'
      const res = await this.$get(`${url}?customerId=${customerId}&&pageNumber=${pageNumber}&&pageSize=${pageSize}`)
      if (res && res.body.content) {
        this.listData = this.searchData.pageNumber === 1 ? res.body.content : this.listData.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.listData && this.listData.length === 0) {
          this.showEmpty = false
        } else {
          this.showEmpty = true
        }
      }
    }
    }
}
</script>

<style lang="scss" scoped>
.main{
  background-color: #f4f4f4;
}
.card{
    background-color: #fff;
    padding: 20rpx 25rpx 10rpx 25rpx;
    border-radius: 12rpx;
    .info{
        margin: 10rpx 0;
        display: flex;
        justify-content: space-between;
    }
}
.listBox{
    // position: relative;
    height: 95vh;
}

.infoC{
  color: #d7a924;
  font-weight: 700;
}
.primC{
  color: #506fff;
  font-weight: 700;
}
.errorC{
  color: #fb718c;
  font-weight: 700;
}
.successC{
  color: #33d7a8;
  font-weight: 700;
}
.fontW{
    font-weight: 700;
}
.disC{
  color: gray;
}
</style>